<template>
    <div style="width: 95%;margin-left: 0;margin-bottom: 5px;">
        <el-button type="primary" :icon="Plus" @click="showDialog()">新增菜单</el-button>
    </div>
    <el-table :data="menusTableData" style="width: 100%;margin: auto;" row-key="mid" border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column prop="mid" label="编号" width="100px" />
        <el-table-column prop="mname" label="名称" width="180px" />
        <el-table-column label="父级编号" width="100px">
            <template #default="scope">
                <el-tag v-if="scope.row.pid == 0" type="primary">一级菜单</el-tag>
                <el-tag v-else type="danger">二级菜单</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="route" label="路由" width="180px" />
        <el-table-column label="图标" width="150px">
            <template #default="scope">
                <el-icon>
                    <component :is="scope.row.icon"></component>
                </el-icon>
            </template>
        </el-table-column>
        <el-table-column prop="createtime" label="创建时间" width="180px" />
        <el-table-column prop="updatetime" label="修改时间" width="180px" />
        <el-table-column width="address" fixed="right" label="操作">
            <template #default="scope">
                <el-tooltip v-if="scope.row.pid == 0" class="box-item" effect="dark" content="新增子菜单" placement="bottom">
                    <el-button type="primary" :icon="Plus" circle @click="insertChildrenMenu(scope.row)" />
                </el-tooltip>
                <!-- 占位按钮，虽然子级菜单没有新增，但布局不能混乱 -->
                <el-button v-else style="visibility: hidden;" circle />
                <el-tooltip class="box-item" effect="dark" content="修改菜单信息" placement="bottom">
                    <el-button type="success" :icon="Edit" circle @click="handleEdit(scope.row)" />
                </el-tooltip>
                <el-tooltip class="box-item" effect="dark" content="删除" placement="bottom">
                    <el-button type="danger" :icon="Delete" circle @click="handleDelete(scope.row)" />
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>
    <!-- 新增和修改菜单的对话框 -->
    <div>
        <el-dialog v-model="dialog.visible" :title="dialog.title" width="25%" draggable>
            <!-- 菜单对象表单 -->
            <el-form :inline="true" :model="dialog.menu" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="dialog.menu.mname" placeholder="请输入菜单名" clearable
                        style="width: 200px;height: 35px;" title="菜单名" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="dialog.menu.route" placeholder="请输入路由" clearable
                        style="width: 200px;height: 35px;" native-type="路由" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="dialog.menu.icon" placeholder="请输入图标" clearable
                        style="width: 200px;height: 35px;" title="图标" />
                </el-form-item>
                <el-form-item style="margin-left: 45px;margin-right: 0;">
                    <el-button type="primary" @click="insertAndUpdateMenu">{{ dialog.btnText }}</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import request from '../utils/request';
import { Delete, Edit, Plus, Search, Setting } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

//定义变量接受树形结构的Menu数据
let menusTableData = ref([]);
//新增或修改菜单的对话框的属性
let dialog = reactive({
    visible: false,
    btnText: '',
    title: '',
    menu: {
        pid: null,
        mname: '',
        route: '',
        icon: '',
    },

})
//新增一级菜单或新增二级菜单的方法
const insertAndUpdateMenu = async () => {
    //1,判断为新增一级还是二级
    if (dialog.title == '新增一级菜单') {
        //发送请求
        let res = await request.post(`/menu/addOrUpdate`, dialog.menu);
        if (res.data.success) {
            ElMessage.success('新增成功');
        } else {
            ElMessage.error(res.data.message);
        }
    } else if (dialog.title == '新增二级菜单') {
        //发送请求
        let res = await request.post(`/menu/addOrUpdate`, dialog.menu);
        if (res.data.success) {
            ElMessage.success('新增成功');
        } else {
            ElMessage.error(res.data.message);
        }
    }else{
        //发送请求
        let res = await request.put(`/menu/updateMenu`,dialog.menu);
        if(res.data.success){
            ElMessage.success('修改成功');
        }else{
            ElMessage.error(res.data.message);
        }
    }
    //刷新页面
    queryMenus();
    //关闭对话框
    dialog.visible = false;
}
//显示新增一级菜单对话框的按钮
const showDialog = () => {
    //初始化菜单数据
    dialog.title = '新增一级菜单';
    dialog.btnText = '新增';
    //清空表单
    dialog.menu = {};
    dialog.menu.pid = null;
    dialog.menu.mname = '';
    dialog.menu.route = '';
    dialog.menu.icon = '';
    //显示对话框
    dialog.visible = true;
}
//显示新增二级菜单对话框的按钮
const insertChildrenMenu = (row) => {
    //清空表单
    dialog.menu = {};
    dialog.menu.pid = null;
    dialog.menu.mname = '';
    dialog.menu.route = '';
    dialog.menu.icon = '';
    //初始化菜单数据
    dialog.title = '新增二级菜单';
    dialog.btnText = '新增';
    dialog.menu.pid = row.mid;
    //显示对话框
    dialog.visible = true;
}
//显示修改菜单的对话框按钮
const handleEdit = (row) => {
    //清空表单
    dialog.menu = {};
    dialog.menu.pid = null;
    dialog.menu.mname = '';
    dialog.menu.route = '';
    dialog.menu.icon = '';
    //初始化菜单数据
    dialog.title = '修改菜单';
    dialog.btnText = '提交';
    dialog.menu = row;
    dialog.menu.mname = row.mname;
    dialog.menu.icon = row.icon;
    dialog.menu.route = row.route;
    //显示对话框
    dialog.visible = true;
}
//删除菜单方法
const handleDelete= async(row)=>{
    let res = await request.delete(`/menu/delectMenu/${row.mid}`);
    if(res.data.success){
        ElMessage.success('删除成功');
    }else{
        ElMessage.error(res.data.message);
    }
    //刷新页面
    queryMenus();
}
//查询所有菜单方法
const queryMenus = async () => {
    //发送请求获取数据
    let res = await request.get(`/menu/queryAllofTree`);
    if (res.data.success) {
        menusTableData.value = res.data.data;
    } else {
        ElMessage.error(res.data.message);
    }
}
//onMounted方法
onMounted(() => {
    queryMenus();
})
</script>